<template>
  <div class="container">
    <MarketHead v-show="type === 'market'" :data="data" />
    <PreviewHead v-show="type !== 'market' && type !== 'jump'" :data="data" />
    <Preview v-if="isShow" modalType="page" v-model="previewData" @valueChange="handleValueChange" />
    <MarketFoot v-show="type === 'market'" :id="id" :data="data" @update="handleUpdate" />
  </div>
</template>

<script>
import Preview from '../EditDashboard/LowCode/Preview'
import MarketFoot from "./MarketFoot"
import MarketHead from "./MarketHead"
import PreviewHead from "./PreviewHead"
import "../EditDashboard/LowCode/custom-components"
import { getBoardById } from "@/api/dashboard/board"
import { mapState } from "vuex"

export default {
  components: {
    Preview,
    MarketFoot,
    MarketHead,
    PreviewHead
  },
  data() {
    return {
      data: {},
      id: -1,
      path: '',
      type: 'preview', // market, jump, preview
      code: '',
      isShow: false
    }
  },
  computed: {
    ...mapState('lowCode', {
      previewData: state => state.previewData
    })
  },
  created(){
    this.getQuery()
  },
  methods: {
    getQuery(){
      const {
        id,
        filter,
        type,
        code
      } = this.$route.query
      this.id = id
      this.filter = filter ? JSON.parse(decodeURIComponent(filter)) : {}
      this.type = type
      this.code = code
      this.$store.commit('lowCode/setJumpFilterData', this.filter)
      console.log(this.code)
      this.getData()
    },
    async getData(){
      // if(this.code){
      //   try {
      //     await valid({code: this.code})
      //   } catch (error) {
      //    this.$message.error(error.response.data.message)
      //     return
      //   }
      // }
      getBoardById({id: this.id})
      .then(data => {
        this.data = data
        const {
          componentList,
          pageSetting
        } = JSON.parse(this.data.pageOperation || '{"componentList":[],"pageSetting":{}}')
        this.$store.commit('lowCode/setPreviewData', {componentList,pageSetting})
        // this.$refs['preview'].update()
        // this.isShow()
        this.isShow = true
      })
    },
    handleValueChange(value){
      // this.previewData = value
      console.log(value)
      this.$store.commit('lowCode/setPreviewData', value)
    },
    handleUpdate(){
      this.getData()
    }
  },
  watch: {
    $route(to, from) {
      console.log(to.path === from.path && to.query.id !== from.query.id)
      this.id = to.query.id
      // if(to.path === from.path && to.query.id !== from.query.id){
      //   this.getQuery()
      // }
      if (to.path === from.path){
        this.getQuery()
      }
      if (to.params.type === 'open'){
        this.getQuery()
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
